<div class="ui stackable grid">
    <div class="row">
      <div class="three wide column" style="text-align:center">
        <div class="ui basic aligned segment" >
          <div class="ui circular image profile-image">
              <img onclick={{action "updateProfileImage"}} src="{{user.photoURL}}">
              <input style="display: none;" id="profileImageSelector" accept="image/*"  type="file" onchange={{action "profileImageSelected"}}>
              <div class="profile-change"><b>Change</b></div>
          </div>
        </div>
        <div class="ui secondary vertical menu" >
          <div class="active item" data-tab="account">
              Account
            <i class="ui angle right icon"></i>
          </div>
          <div class="item" data-tab="password">
              Password
            <i class="ui angle right icon"></i>
          </div>
        </div>
      </div>
      <div class="one wide column"></div>
      <div class="ten wide column" style="padding-top: 50px">
        <div class="ui active attached tab segment" data-tab="account">
          {{user-component/user-account session=session isLoading=isLoadingName user=user sendUserName=(action 'updateUserName')}}
        </div>
        <div class="ui horizontal divider"></div>
        <div class="ui attached tab segment" id="place" data-tab="password">
          {{user-component/user-password session=session isLoading=isLoadingPassword sendUserPassword=(action 'updateUserPassword')}}
        </div>
      </div>
    </div>
</div>

<script type="text/javascript">
    $('.vertical.menu .item').tab();
</script>
